<template>


  <div class="detail-main">
    <!-- 海报图片 -->
    <div class="post-main" style="transform: translate3d(0px, 0px, 0px);
      height: 50vw;">
      <section class="post-member" >
        <a href="#">
          <img src="../assets/head.png" alt>
        </a>
        <p class="show-bill-title" style="display: none;">海报标题</p>
      </section>
    </div>

    <div class="teacher">
      <p  style="float: left; margin-left: 10px;padding-top:5px;" ><i class="el-icon-s-platform"></i>预约时间</p>
      <div class="work-status" style="float: right;">
        <div class="status-one"></div>
        <div class="status-text">工作中</div>
        <div class="status-two"></div>
        <div class="status-text">休息中</div>
      </div>
      <el-divider style="float: left; padding-top: 35px;"></el-divider>
      <div class="work-time">
        <div class="time-item" v-for="(item, index) in workInfoList" >
          <div style="height: 4vw;font-size: 3vw;font-family: 'Avenir', Helvetica, Arial, sans-serif; padding-top: 1vw" v-if="0 == index">今天</div>
          <div style="height: 4vw;font-size: 3vw;font-family: 'Avenir', Helvetica, Arial, sans-serif; padding-top: 1vw" v-else-if="1 == index">明天</div>
          <div style="height: 4vw;font-size: 3vw;font-family: 'Avenir', Helvetica, Arial, sans-serif; padding-top: 1vw" v-else>{{ item.day }}</div>
          <el-divider></el-divider>

          <el-button v-if="1 == item.am" size="medium" type="primary" plain  @click="select(index,1)">上午</el-button>
          <el-button v-else size="medium" plain disabled  @click="select(index,0)">上午</el-button>

          <el-button v-if="1 == item.pm" size="medium" type="primary" plain  @click="select(index,2)">下午</el-button>
          <el-button v-else size="medium" plain disabled @click="select(index,0)">下午</el-button>

<!--          <el-divider v-if="1 == item.sign" style="width: 5vw;height: 1px; margin-right: 5vw">asdf</el-divider>-->
        </div>
      </div>

      <div v-if="true==selectStatus">
        <p  style="  margin-left: 10px;padding-top:5px;" ><i class="el-icon-time"></i>{{ selectDate }}</p>
        <el-divider class="el-divider2"></el-divider>
  <!--      <el-descriptions-item label="老师联系电话：">176 7100 ****</el-descriptions-item>-->
        <div class="teacher-detail">
        <i class="el-icon-s-custom" style="margin: 1vw;"></i>
        <span style="width: 70px;overflow: hidden;margin: 0;">讲师联系电话：</span>
        <span class="number" v-if="logoStatus==false">{{number.slice(0,7)}}****</span>
        <span class="number" v-else>{{ number }}</span>
        <span class="copy-btn" v-if="logoStatus==true" style="margin-left: 15px;color: #8cc0ff" v-clipboard:copy="number" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</span>
<!--          <a v-if="logoStatus==true" :href="'tel:'+this.number">拨打电话</a>-->
        <div class="buttons" style="width:85vw; margin-right: 0; padding: 0; display: flex">
          <el-button type="success" size="small" round @click="postApply">申请该时间授课</el-button>
          <el-button type="warning" size="small" round v-if="logoStatus==false" @click="toLogin()">登录查看完整电话</el-button>
        </div>
        </div>

      </div>
      <div v-else style="">
        <el-divider class="el-divider2"></el-divider>
        <p style="text-align: center;margin-left: 5px;">请先选择需要讲授的时间!</p>
      </div>
    </div>
    <div style="height: 50vw;"  v-loading.fullscreen.lock="fullscreenLoading"></div>
    <!--<p  style="text-align: left;margin-left: 10px;margin-top: 10px;"><i class="el-icon-s-platform"></i>下午工作老师</p>
    <div class="teacher">
&lt;!&ndash;      asdfa&ndash;&gt;
    </div>-->

  </div>
</template>

<script>
export default {
name: "BookDetail",
  data(){
    return{
      itemKey: null,
      // ch:["今天","11-13 五","11-14 六","11-15 日","11-16 一","11-17 二","11-18 三","11-19 四",9,10,11,12,13,14],
      number: "17671005416",
      logoStatus: false,
      selectStatus: true,
      selectItem: null,
      selectDate: '',
      selectid: null,
      open: null,
      workInfoList: [], //存着预约时间值日表
      inedxByDay: {}, //把sortTime和workInfoList连接起来
      sortTime:{} , //json里面放了[]，把数据用day做标记存下来，方便查询
      fullscreenLoading: true,
      store_info:{
        phone:0
      }
    }
  },
  async created() {
    this.selectStatus = false
    this.fullscreenLoading = true;
    setTimeout(() => {
      this.fullscreenLoading = false;
      // this.message.error('登录失败,请重试!')
    }, 1000);
    // console.log(this.$route.query.typeId);
    const { data: res } = await this.$http.post('duty/info/list2',{sid:this.$route.query.typeId});
    console.log(res)
    // var res= {}
    // this.workInfoList = res.data
    var date = new Date();
    var week = this.getDay(date.getDay())
    var moth = date.getMonth()+1
    var day = date.getDate()
    if(day>=0 && day<=9){
      day = '0'+day;
    }
    var toDay = date.getFullYear()+'-'+ moth +'-'+ day
    // console.log(toDay)
    for (var j = 0; j<14; j++){
      //存key
      this.inedxByDay[toDay] = j;
      //构造时间表项
      var item = {}
      item.allday = toDay
      item.day = toDay.slice(5,11) + ' ' + week;
      item.am = 0
      item.pm = 0
      item.level1 = Number.MAX_VALUE
      item.level2 = Number.MAX_VALUE
      item.id1 = null
      item.id2 = null
      item.phone1 = null
      item.phone2 = null
      if('日' == week) item.sign = 1
      else item.sign = 0
      this.workInfoList[j] = item
      //构造查询结果规格化存储项，对每项的key赋值
      // this.sortTime[toDay] = []
      //时间加一天，并获取星期
      date = date.setDate(date.getDate()+1);
      date=new Date(date);
      var week = this.getDay(date.getDay())
      moth = date.getMonth()+1
      var day = date.getDate()
      if(day>=0 && day<=9){
        day = '0'+day;
      }
      toDay = date.getFullYear()+'-'+ moth +'-'+day
    }
    // console.log(this.inedxByDay)
    console.log(res)
    console.log(this.inedxByDay)
    console.log(this.workInfoList)
    for (var index=0,len = res.data.length; index<len; index++){
      // console.log(this.workInfoList[index])
      console.log(res.data[index])
      var key = this.inedxByDay[res.data[index].day]
      // console.log(key)
      if(undefined != key){
        if(1 == res.data[index].time) {
          this.workInfoList[key].am=1;
          if(res.data[index].level < this.workInfoList[key].level1){
            this.workInfoList[key].level1 = res.data[index].level
            this.workInfoList[key].id1 = res.data[index].pid
            this.workInfoList[key].phone1 = res.data[index].phonenumber
          }
        }
        if(2 == res.data[index].time) {
          this.workInfoList[key].pm=1;
          if(res.data[index].level < this.workInfoList[key].level2){
            this.workInfoList[key].level2 = res.data[index].level
            this.workInfoList[key].id2 = res.data[index].pid
            this.workInfoList[key].phone2 = res.data[index].phonenumber
          }
        }
        // console.log(res.data[index].level)
        // console.log(key)
        // console.log(this.workInfoList[key].level)
        // this.sortTime[res.data[index].id].append(res.data[index])
      }
    }
    // this.select(0,1)
    // console.log(this.workInfoList)
    if(false == this.$parent.loginStatus) this.logoStatus = false
    else this.logoStatus = true
    this.selectStatus = false;
    // location.reload();
  },
  computed:{
    tel(){
      return 'tel:'+Number(this.store_info.phone)
    }
  },
  methods:{
    handleClick(){

    },
    select(index,key){
      console.log(key)
      this.selectStatus = true;
      if(1==key) {
        this.selectItem = this.workInfoList[index]
        this.selectDate = this.workInfoList[index].day.slice(0,5) +' 上午'
        this.selectid = this.workInfoList[index].id1
        this.number = this.workInfoList[index].phone1
      }
      if(2==key) {
        this.selectItem = this.workInfoList[index]
        this.selectDate = this.workInfoList[index].day.slice(0,5)+' 下午'
        this.selectid = this.workInfoList[index].id2
        this.number = this.workInfoList[index].phone2
      }
      // console.log(this.selectItem)
      // console.log(this.selectDate)
      // console.log(this.selectid)
      // console.log(this.number)
    },
    select2(index){
      console.log(index)
    },
     postApply(){
      if(true == this.$parent.logoStatus)
        this.$confirm('未登录，将跳转至登录页面', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          }).then(() => {
            this.$router.push("/login");
          }).catch(() => {
            this.$message({
                  type: 'info',
                  message: '已取消',
                  })
          })

      this.$confirm('请拨打老师电话，联系老师确认！', '下一步', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async() => {
        // console.log("1")
            var tiemtemp
            var userid = window.sessionStorage.getItem('username')
        console.log(userid)
            var id = window.sessionStorage.getItem('id')
        console.log(id)
            if(1 == this.selectItem.am) tiemtemp = 1;
              else  tiemtemp = 2;
        // console.log("2")
            const { data: res } = await this.$http.post('order/info/add',{
              pid: this.selectid,
              day : this.selectItem.allday,
              status: 1,
              number: userid,
              uid: id,
              time: tiemtemp,
              sid:this.$route.query.typeId
            })
        // console.log("3")
              console.log(res)
              if(0 != res.code) {
                this.$message({
                  type: 'warning',
                  message: '错误:'+res.msg,
                })
              }else{
                // a.href = this.tel
                window.location.href = 'tel:'+this.number;
                this.$message({
                  type: 'success',
                  message: '已经发起申请，请联系老师!',
                })
              }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消!',
            })
          })
    },
    toLogin(){
      // this.$parent.logining=true;
      this.$router.push("/login");
    },
// 复制成功时的回调函数
    onCopy (e) {
      this.$message.success("内容已复制到剪切板！")
    },
// 复制失败时的回调函数
    onError (e) {
      this.$message.error("抱歉，复制失败！")
    },
    getDay(days){
      switch(days) {
        case 1:
          return '一';
          break;
        case 2:
          return  '二';
          break;
        case 3:
          return  '三';
          break;
        case 4:
          return  '四';
          break;
        case 5:
          return  '五';
          break;
        case 6:
          return '六';
          break;
        case 0:
          return '日';
          break;
      }
    }
  }
}
</script>

<style scoped>


.detail-main{
  width: 100vw;
  height: 100vh;
  background-color: #f6f6f6;
  /*overflow-x: hidden;*/
}
.el-scrollbar{
  display: flex;
  flex-direction: row;
  align-items:center;
  flex-wrap: nowrap;
  justify-content:flex-start;
  background-color: #f6f6f6;
}
.item{
  float: left;
  /*width: 20%;*/
  /*font-weight: bolder;*/
  /*display: inherit;*/
  /*display：inline-block;*/
  width: 43px;
  height: 25px;
  background-color: #ffffff;
  padding-top: 10px;
  margin: 5px;
  /*display:flex;*/
}
.item1{
  float: left;
  /*width: 20%;*/
  /*font-weight: bolder;*/
  /*display: inherit;*/
  /*display：inline-block;*/
  width: 43px;
  height: 25px;
  background-color: #f6f6f6;
  padding-top: 10px;
  margin: 5px;
  /*display:flex;*/
}
.teacher{
  margin: 5vw;
  margin-top: 0;
  background-color: white;
  border-radius: 1rem;
  box-shadow: 0 0 .5rem .1rem  rgba(30,104,234,0.1);
  min-height: 250px;
  /*padding-bottom: 10px;*/
  width: 90vw;
  /*position: fixed;*/
}

.teacher .el-divider{
  margin: 2px;
  /*margin-top: 25px;*/
}

.work-time{
  width: 98%;
  height: 100%;
  padding: 1%;
  /*background-color: #42b983;*/
  display: flex;
  flex-wrap: wrap;
}

.time-item{
  width: 16vw;
  height: 21vw;
  margin: 0.8vw;
  margin-bottom: 6px;
  display: block;
  white-space: nowrap;
  /*background-color: aqua;*/
  margin-bottom: 5px;
  border-radius: 6px;
  background: #80ffff;
  box-shadow: inset 12px 12px 24px #7cf7f7,
  inset -12px -12px 24px #84ffff;
}
.time-item .el-divider{
  margin: 0;
}
.el-button{
  width: 16vw;
  height: 8vw;
  display: block;
  margin: 0;
  padding: 0;
  padding: 2vw 4vw 2vw 4vw;
}

.work-status{
  margin-right: 2vw;
  width: 60vw;
  display: flex;
}

.status-one {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #8cc0ff;
  margin-top: 12px;
  margin-left: 110px;
  display: inherit;
}

.status-two{
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #ffffff;
  border-width: 0.5px;
  border: #c4c7cf;
  border-style: solid;
  margin-top: 12px;
  margin-left: 10px;
  display: inherit;
}

.status-text{
  margin-top: 6px;
  margin-left: 4px;
  width: 50px;
  font-size: small;
}

.teacher .el-divider2{
  margin: 0;
  margin-top: 4px;
}

.teacher-detail{
  text-align: left;
  width: 100%;
  height: 16vw;
  padding-top: 3vw;
  padding-left: 3vw;
  /*display: flex;*/
  /*flex-wrap: wrap;*/
  position: relative;
  white-space: normal;
  /*background-color: #8cc0ff;*/
}

.number{
  padding-top: 6px;
}

.buttons{
  flex-direction: row-reverse;
  justify-content: space-between;
}

.buttons .el-button{
  width: 29vw;
  margin-top: 5px;
  padding: 5px;
}

</style>
